<!--
 * @Author: your name
 * @Date: 2022-01-18 17:51:09
 * @LastEditTime: 2022-01-20 00:13:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\VueEcharts\ChinaMap.vue
-->
<template>
  <div>
      <div class="title">国内疫情地图</div>
      <!-- 地图容器 -->
       <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <van-tabs v-model="active" animated @change='change'>
        <van-tab title="现存确诊">
            <div id="nowMain" style="width:100%; height: 7rem"></div>
            <div v-if="arr.length <= 0">今日接口次数已达超额,请择日查看</div>

        </van-tab>
        <van-tab title="累计确诊">
            <div id="main" style="width: 100%; height: 7rem"></div>
        </van-tab>
        </van-tabs>
  </div>
</template>

<script>
import api from '../../api/index'
export default {
    name:'ChinaMap',
    data() {
        return {
            active: 0,
            arr: [],
        }
    },
    mounted() {
        api.getCovData().then((res) => {
            console.log('--------',res.data)
            //获取省份信息
            let citys = res.data.retdata //省份信息原数据
            let arr = [] //累计
            let newArr= [] //现存
            for (let i = 0; i < citys.length; i++) {
                const obj = {}
                const newObj = {}
                obj.name = citys[i].xArea  //省名
                obj.value = citys[i].confirm; //累计确诊人数   curConfirm现在确诊人数
                newObj.name = citys[i].xArea  //省名
                newObj.value = citys[i].curConfirm;
                arr.push(obj)
                newArr.push(newObj)
            }
            this.arr = arr;
            // console.log("城市的数据", arr);
            this.$nextTick(() => {
                // this.$myChart.chinaMap('main',arr) //读取不到节点,因为是异步的标签,显示为null
                this.$myChart.chinaMap('nowMain',newArr)
            })
            

        })

        
    },
    methods: {
        change(title) {//name,title
        //   console.log("-----", title);
        if (title == 1) {
            this.$nextTick(() => {
            this.$myChart.chinaMap("main", this.arr);
            });
        }
        },
    },
}
</script>

<style>
.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
    border-top: 1px solid #eee;
}
.title::before {
    content: "";
    border-left: 0.1rem solid rgb(9, 60, 202);
    font-size: 0.26rem;
    margin-right: 0.1rem;
  }
#main,#nowMain{
  background: #f5f5f5;
}
</style>
